<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>案例</title>
    <script src="../../../../1shixun/HTML学习/vue.js"></script>
    <style>
        table td{
            text-align: center;
        }
    </style>
</head>
<body>
    <div id ="app">
        <table align="center" border="1" width="60%" cellspacing="0">
            <tr>
                <td>编号</td>
                <td>姓名</td>
                <td>年龄</td>
                <td>性别</td>
                <td>成绩</td>
                <td>等级</td>
            </tr>
            <tr v-for="(user,index) in users">
                <td>{{index+1}}</td>
                <td>{{user.name}}</td>
                <td>{{user.age}}</td>
                <!-- 
                <td v-if="user.gender == 1">男</td>
                <td v-else>女</td> -->
                <td>{{user.gender == 1 ? "男" : "女"}}</td>
                <td>{{user.score}}</td>
                <td v-if="user.score >= 85 && user.score <= 100">优秀</td>
                <td v-else-if="user.score >= 60 && user.score < 85">及格</td>
                <td v-else="user.score >= 0 && user.score <= 60"><span style="color: red;">不及格</span></td>
            </tr>
        </table>
    </div>
    <script>
        const app = new Vue({
            el:'#app',
            data: {
               users: [{
                name: "Tom",
                age: 20,
                gender: 1,
                score: 78
            },{
                name: "Rose",
                age: 18,
                gender: 2,
                score: 86
            },{
                name: "Jerry",
                age: 26,
                gender: 1,
                score: 90
            },{
                name: "Tony",
                age: 30,
                gender: 1,
                score: 52
            }]
            }
        });
    </script>
</body>
</html>